<template>
	<view class="monitor">
		<view class="box_header">
			<text>单位：千卡</text>
		</view>

		<view class="box_section">
			<view class="box_translate">
				<text>推荐</text>
				<text>- -</text>
			</view>
			<view class="box_surplus">
				<view class="box_rudio">
					<text>剩余</text>
					<text>?</text>
				</view>
			</view>
			<view class="box_translate">
				<text>摄入</text>
				<text>- -</text>
			</view>
		</view>

		<view class="box_footer">
			<ul>
				<li>
					<text>碳水化合物</text>
					<text></text>
					<text>0/0克</text>
				</li>
				<li>
					<text>蛋白质</text>
					<text></text>
					<text>0/0克</text>
				</li>
				<li>
					<text>脂肪</text>
					<text></text>
					<text>0/0克</text>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		name: "HomeMonitor",
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss">
	.monitor {
		margin: 15px;
		min-height: 20vh;
		border-radius: 20px;
		background: white;
		padding: 10px 15px;
		display: flex;
		flex-direction: column;

		.box_header {
			font-size: 12px;
			color: #adb0c0;
			text-align: right;
		}

		.box_section {
			margin: 10px 0;
			display: flex;
			justify-content: space-around;

			.box_translate {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #adb0c0;
				font-size: 13px;

				text {
					&:nth-of-type(2) {
						color: black;
						font-size: 20px;
						font-weight: bold;
					}
				}
			}

			.box_surplus {
				display: flex;
				justify-content: center;
				align-items: center;

				.box_rudio {
					width: 65px;
					height: 65px;
					border-radius: 50%;
					border: 5px solid #ffdac4;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					color: #adb0c0;
					font-size: 13px;

					text {
						&:nth-of-type(2) {
							color: black;
							font-weight: bold;
							font-size: 20px;
							margin: 5px 0;
						}
					}
				}
			}
		}

		.box_footer {
			ul {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0;
				li {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					color: #adb0c0;
					font-size: 12px;
					margin-left: 10px;
					flex: 1;

					&:nth-of-type(1) {
						text {
							&:nth-of-type(2) {
								margin: 5px 0;
								width: 90%;
								height: 3px;
								background: #eeeeff;
							}
						}
					}

					&:nth-of-type(2) {
						text {
							&:nth-of-type(2) {
								margin: 5px 0;
								width: 90%;
								height: 3px;
								background: #fff5ec;
							}
						}
					}

					&:nth-of-type(3) {
						text {
							&:nth-of-type(2) {
								margin: 5px 0;
								width: 90%;
								height: 3px;
								background: #ffe9e8;
							}
						}
					}
				}
			}
		}
	}
</style>
